<script setup lang="ts">
import { reactive, onMounted, ref } from 'vue';
import NewsItem4 from '@/components/News-item4.vue';
import ButtonVue from '@/components/Button.vue';
import ScrollVue from '@/components/Scroll.vue';
import { getLetter } from '@/api'
import { useRouter } from "vue-router";
const router = useRouter()
const state = reactive({
  list: [] as Array<any>,
  news: [
    {
      id: "http://dangshi.people.com.cn/n1/2021/0409/c436975-32074302.html",
      year: "2022",
      create_at: "05-24",
      introduce: "百年征程波澜壮阔，百年初心历久弥坚。庆祝中国共产党建党100周年之际，中央广播电视总台文艺之声、阅读之声将于4月9日起倾力推出大型融媒体特别节目《追寻——红色家书背后的故事》（ 以下简称《追寻》）。节目以不同时代共产党员的红色家书为切入点，通过蒋雯丽、何冰、胡歌、易烊千玺、李立宏、李野墨、康辉、任鲁豫、朱迅、尼格买提等百位演播者的倾情讲述，运用音频、视频、海报等多种表现形式，传承红色基因，彰显家国情怀。",
      is_recommend: "1",
      title: "一次深情的回望：中央广播电视总台推出《追寻——红色家书背后的故事》",
    },
    {
      id: "http://js.cnr.cn/rdzt/20210410/t20210410_525458358.shtml",
      year: "2022",
      create_at: "05-24",
      introduce: "百年征程波澜壮阔，百年初心历久弥坚。庆祝中国共产党建党100周年之际，中央广播电视总台文艺之声、阅读之声将于4月9日起倾力推出大型融媒体特别节目《追寻——红色家书背后的故事》（ 以下简称《追寻》）。节目以不同时代共产党员的红色家书为切入点，通过蒋雯丽、何冰、胡歌、易烊千玺、李立宏、李野墨、康辉、任鲁豫、朱迅、尼格买提等百位演播者的倾情讲述，运用音频、视频、海报等多种表现形式，传承红色基因，彰显家国情怀。",
      is_recommend: "1",
      title: "央广网《追寻——红色家书背后的故事》",
    },
    {
      id: "http://www.xinhuanet.com/culture/2021-04/08/c_1127305892.htm",
      year: "2022",
      create_at: "05-24",
      introduce: "百年征程波澜壮阔，百年初心历久弥坚。庆祝中国共产党建党100周年之际，中央广播电视总台文艺之声、阅读之声将于4月9日起倾力推出大型融媒体特别节目《追寻——红色家书背后的故事》（ 以下简称《追寻》）。节目以不同时代共产党员的红色家书为切入点，通过蒋雯丽、何冰、胡歌、易烊千玺、李立宏、李野墨、康辉、任鲁豫、朱迅、尼格买提等百位演播者的倾情讲述，运用音频、视频、海报等多种表现形式，传承红色基因，彰显家国情怀。",
      is_recommend: "1",
      title: "《追寻——红色家书背后的故事》4月9日开播",
    },
    {
      id: "http://ent.cnr.cn/ylzt/hsjs/sp/20210407/t20210407_525455476.shtml",
      year: "2022",
      create_at: "05-24",
      introduce: "守信仰之初心、燃前进之灯火。中央广播电视总台文艺之声、阅读之声特别节目《追寻——红色家书背后的故事》4月9日起正式上线！郭麒麟、胡歌、刘敏涛、涂松岩、易烊千玺、张一山等百位演播者，为您讲述家书背后的真实故事。",
      is_recommend: "1",
      title: "《追寻——红色家书背后的故事》百位演播者为您讲述家书背后的真实故事",
    },
    {
      id: "https://e.gmw.cn/2021-06/29/content_34958498.htm",
      year: "2022",
      create_at: "05-24",
      introduce: "泱泱华夏五千年，百年峥嵘岁月。为庆祝中国共产党成立100周年，中央广播电视总台文艺之声、阅读之声于4月9日起推出大型融媒体特别节目《追寻——红色家书背后的故事》（以下简称《追寻》）。节目以不同时代共产党员的红色家书为切入点，通过蒋雯丽、何冰、胡歌、易烊千玺、李立宏、李野墨、康辉、任鲁豫、朱迅、尼格买提等百位演播者的倾情讲述，运用音频、视频、海报等多种表现形式，传承红色基因，彰显家国情怀。这是共产党人艰苦奋斗峥嵘岁月的生动再现，也是中央广播电视总台建党百年宣传报道的又一精品力作。",
      is_recommend: "1",
      title: "大音巧叙事，深情扣心弦——《追寻》构建红色文化视听传播闭环",
    },
    {
      id: "https://tv.cctv.com/2021/04/08/ARTI2jzSNfWj5G0G9qI9uDZW210408.shtml",
      year: "2022",
      create_at: "05-24",
      introduce: "百年征程波澜壮阔，百年初心历久弥坚。庆祝中国共产党建党100周年之际，中央广播电视总台文艺之声、阅读之声将于4月9日起倾力推出大型融媒体特别节目《追寻——红色家书背后的故事》（ 以下简称《追寻》）。节目以不同时代共产党员的红色家书为切入点，通过蒋雯丽、何冰、胡歌、易烊千玺、李立宏、李野墨、康辉、任鲁豫、朱迅、尼格买提等百位演播者的倾情讲述，运用音频、视频、海报等多种表现形式，传承红色基因，彰显家国情怀。",
      is_recommend: "1",
      title: "一次深情的回望：中央广播电视总台推出《追寻——红色家书背后的故事》",
    }
  ]
})

const ScrollDom = ref()
onMounted(() => {
  getLetter().then((res: any) => {
    state.list = res
  })
})
const handleClick = (num: number) => {
  ScrollDom.value.clickFn(num)
}
const handlePath = (src: string) => {
  router.push(src)
}
</script>

<template>
  <div class="topbg"></div>
  <div class="container redletter">
    <div class="wrapper-1">
      <div class="left font-m">
        <div class="text-muted">中央广播电视总台</div>
        <div class="font-lg font-bold mb-2 title">【追寻 - 红色家书背后的故事】</div>
        <div class="content text-body">
          <p>百年征程波澜壮阔，百年初心历久弥坚。为<span>庆祝中国共产党建党一百周年</span>，由中央广播电视总台文艺之声、阅读之声共同推出的特别节目<span>《追寻 -
              红色家书背后的故事》</span>，于4月9日起隆重上线。</p>
          <p>中视财华国际传媒作为该节目的总视觉设计方以及总后期制作方，深度参与节目的策划与制作。</p>
          <p>
            自4月9日开播以来，《追寻》通过<span>“新视角、新形态、新表达”</span>回望百年党史，以真切的故事、真挚的情怀收获各方关注与好评。
          </p>
        </div>
      </div>
      <div class="right"><img src="https://img.cctvch.cn/uploads/202205/2820/6292165560d3e503313.png"></div>
    </div>
    <div class="scroll-box wrapper-2">
      <div class="one">
        <img src="https://img.cctvch.cn/uploads/87840319d664672028039d532067400f.png" alt="" />
      </div>
      <div class="two">
        <div class="ml-3">
          <div class="logo">
            <img src="https://img.cctvch.cn/uploads/38a03d7df1e60b0a3de57a4f53b12ebb.png" alt="" />
          </div>
          <div class="title">
            <div>#追寻党史百年记忆#</div>
            <div>#追寻红色家书背后的故事#</div>
          </div>
          <div class="content">
            截至目前，#追寻党史百年记忆#、#追寻红色家书背后的故事#微博双话题阅读量近6亿
          </div>
        </div>
        <div class="img">
          <img src="https://img.cctvch.cn/uploads/3a5fa16cc7c6862b7534e5688ea9de01.png" alt="" />
        </div>
      </div>
      <div class="three">
        <img class="img-1" src="https://img.cctvch.cn/uploads/08a5614238a785f9e25eedd132ec2fa8.png" alt="" />
        <img class="img-2" src="https://img.cctvch.cn/uploads/0053ef6d8e670159d7cf54b130911e5f.png" alt="" />
        <div class="content text-1">
          <div>播放总量</div>
          <div>超过900万</div>
        </div>
        <div class="content num-1">
          <div class="num">900</div>
          <div>万</div>
        </div>
        <div class="content text-2">
          <div>播放总量</div>
          <div>超过600万</div>
        </div>
        <div class="content num-2">
          <div class="num">600</div>
          <div>万</div>
        </div>
      </div>
      <div class="four">
        <div class="mb-3">
          <img src="https://img.cctvch.cn/uploads/3c2b1a932b590e199dcf8813e2d40955.png" alt="" />
        </div>
        <div class="content">
          在<span>央视新闻、央视频、云听、央广网、央视网、央视文艺</span>等平台覆盖用户达2.5亿人次
        </div>
      </div>
    </div>
    <div class="wrapper-3">
      <div class="flex item">
        <div class="mr-3 left">
          <ButtonVue width="100" height="100">
            <div class="box-wrap">
              <div>节目</div>
              <div>相关内容</div>
              <div>浏览量</div>
            </div>
          </ButtonVue>
        </div>
        <div class="flex flex-column justify-end font-md">
          <div class="flex text-body info">
            <div class="num">2000</div>
            <div>万</div>
          </div>
          <div class="text-muted">节目相关内容微博浏览总量超过2000万</div>
        </div>
      </div>
      <div class="flex item">
        <div class="mr-3 left">
          <ButtonVue width="100" height="100">
            <div class="box-wrap">
              <div>主流媒体 </div>
              <div>深入报道</div>
            </div>
          </ButtonVue>
        </div>
        <div class="flex flex-column justify-end font-md">
          <div class="img">
            <img src="https://img.cctvch.cn/uploads/cd54ef0dbac69c7b25e1a4c3be7b6026.png" alt="">
          </div>
          <div class="text-black">人民日报、新华社、光明日报等主流媒体对节目进行深入报道</div>
        </div>
      </div>
    </div>
    <div class="wrapper-4">
      <div class="left">
        <img src="https://img.cctvch.cn/uploads/202205/2820/6292161b3b6e4224435.png">
      </div>
      <div class="right">
        <div class="title">
          <div>大音巧叙事，深情扣心弦</div>
          <div>《追寻》构建红色文化视听传播闭环</div>
        </div>
        <div class="content" style="width: 410px;">
          <div class="tit">泱泱华夏五千年，百年峥嵘岁月</div>
          <p>为庆祝中国共产党成立100周年<br>中央广播电视总台文艺之声、阅读之声<br>于2021年4月9日起推出大型融媒体特别节目<br>《追寻——红色家书背后的故事》（以下简称《追寻》）</p>
          <p>节目以不同时代共产党员的红色家书为切入点<br>通过百位演播者的倾情讲述<br>运用音频、视频、海报等多种表现形式<br>传承红色基因，彰显家国情怀</p>
          <p>这是共产党人艰苦奋斗峥嵘岁月的生动再现<br>也是中央广播电视总台建党百年宣传报道的又一精品力作</p>
        </div>
      </div>
    </div>
    <div class="wrapper-5" v-if="state.list.length">
      <ScrollVue :list="state.list" :show-num="5" :margin="20" ref="ScrollDom" :pagination="false">
        <template v-for="(item, index) in state.list" #[index]>
          <div class="scroll-item" @click="handlePath(item.url)">
            <div class="img-wrap">
              <img :src="item.cover_url" :alt="item.title">
            </div>
            <div class="info tc">
              <div class="font-md text-black line-1">{{ item.title }}</div>
              <div class="font text-body line-1">{{ item.introduce }}</div>
            </div>
          </div>
        </template>
      </ScrollVue>
      <div class="arrow-wrap flex-center mt-4">
        <div class="arrow left" @click="handleClick(-1)">
          <div class="infont-icon"></div>
        </div>
        <div class="mx-2"></div>
        <div class="arrow right" @click="handleClick(1)">
          <div class="infont-icon"></div>
        </div>
      </div>
    </div>
    <div class="wrapper-6">
      <div class="flex">
        <div class="content flex-1">
          <div class="tit">以信传情再现历史 以声为媒引起共鸣</div>
          <p>
            书信即文章，有其文学功能。文情并茂的书信可以满足受众的文学欣赏要求，堪称绝妙文章。当《追寻》以书信入题，多元化的文学选题随之呈现，是生活，是爱情，是舍得，是宣誓，是承诺。真正的优秀的书信，总是能看到作者博大深邃的内心，也能折射时代的洪流。百封红色家书，足以窥见革命烈士的强大内心，足以见证革命年代的波澜壮阔。
          </p>
          <p>当今时代，互联网技术发展迅速，移动设备广泛普及，传统媒体与新兴媒体融合发展，音频已成为走在移动互联网发展前沿的媒体。音频凭借着单纯的信息维度，汹涌地涌入听者的身体，反而更能直击人心，更能深度调动听者全部的知觉。
          </p>
          <p>
            《追寻》以声音为媒介，带领受众进入书写家书的历史情境中，呈现了活生生的历史，展现了滚烫烫的初心，讴歌了共产党人以革命豪情、爱国热情、奋斗激情书写的百年历史。百位演播者演绎百篇高品质的经典诵读，为爱好声音的听众带来一场精神文化的饕餮盛宴，用真诚的声音朗诵红色家书的深情，用执着的心灵描绘革命人生的壮美画卷。
          </p>
          <p>
            情感放大是中国特色节目中不可或缺的元素，《追寻》将百封家书通过声音的方式呈现在听众面前，用震撼人心的讲述和声情并茂的吟诵传递出人间至美之情。一封封浸染着父母之恩、夫妻之爱、兄弟之情的家书，透过声音，连着时空，栩栩如生。
          </p>
          <p>
            传统音频节目营造的是“广场语境”的对话，由播音员进行朗读，听众被动接收。而《追寻》创造了一个基于听觉的空间，通过诵读人的情境化讲演，融讲述、表演于一体，转“广场语境”为“私密语境”，转“常态诵读”为“直指人心”，大大增强了节目的代入感。“小宝宝，你的母亲不能抚养你了，不得不把你交与你的祖父母来养你，你不必恨我！而恨当时的环境！我很明白地告诉你，你的父母是个共产党员，且到俄国读过书……望你好好长大成人，且好好读书，才不负你父母的期望。”演员刘敏涛深情的诵读，直指人心，饱含了一位即将慷慨赴死的母亲对襁褓中孩子的舐犊之情，引起受众强烈共鸣。
          </p>
        </div>
        <div class="img-wrap ml-5 mt-4">
          <div class="img"
            style="width: 255px; height: 455px; border: 4px solid #000000;box-shadow: 0px 22px 56px 14px rgba(96, 102, 118, 0.35);border-radius: 12px;overflow: hidden;">
            <img src="https://img.cctvch.cn/uploads/202205/2820/629215f5b8630651639.png">
          </div>
        </div>
      </div>
      <div class="content">
        <div class="tit">匠人精神丰富细节 精耕细作重塑认知</div>
        <p>
          《追寻》主创团队用脚力践行责任，用眼力发现真实，用脑力深刻思考，用笔力诉说真情，深入探寻红色文化资源，发挥文艺作品在党史学习教育中的重要作用。为了让主题性创作内涵开掘更深，从策划、录制、拍摄到推出，《追寻》历时一年，主创团队走遍北京、上海、浙江、江苏、重庆、贵州、广东、海南等地，深入到家书所处的历史人文环境之中，采访革命志士和党史专家，挖掘鲜为人知的真实细节，这使其创作触角跳出传统音频节目的限制，实现了选题的素材增值和内容增值，延伸了节目的表现空间。
        </p>
        <p>
          随着社会进步和受众审美水平的提升，经典需要被唤起、被重复，却应该以一种符合当下时代发展的新样态出现。《追寻》以一种别出心裁的方式对经典人物、经典故事进行了生动演绎。当人们熟悉的夏明翰、冷少农、赵一曼等英雄人物又一次出现在受众面前，受众头脑中的记忆被重新唤起。而当百位演播者站在建党100周年的历史节点上重新诵读英雄人物深情的家书、不朽的故事，这些记忆又实现了变换与重组。可以说，节目建构了现在与过去，记忆与创意之间的联系，延展了音频节目的思维空间、想象空间和心理空间。
        </p>
        <p>
          人物和文本的互文，让家书诵读有了多重的视角、丰富的层次。《追寻》以生命情感为连接，以诵读的形式沟通芸芸众生，让更多的革命烈士通过这一方式被世人认识。借助大众传媒，更多革命烈士将被这个时代、被我们每一个人了解、认知、传诵。通过《追寻》，我们认识了裘古怀。“同志们，壮大我们的革命武装力量争取胜利吧！胜利的时候，请你们不要忘记我们！”他的临终遗言振聋发聩，令人动容。
        </p>
        <p>
          “百年党史”“百集制作”“百封家书”“百人诵读”的“四个一百”宏大构架将主题性创作的思想高度、情感深度和艺术精度统一起来。百位共产党人的形象透过声音跃然纸上，他们的革命精神穿过电波直抵人心。《追寻》让受众“始于家书故事，终于共产党人精神”，其成功的背后，我们看到了中国媒体人努力回馈受众与社会期待的匠人精神。
        </p>
      </div>
      <div class="img-wrap">
        <div class="mr-2">
          <div class="img" style="width: 638px; height: 504px">
            <img src="https://img.cctvch.cn/uploads/202205/2820/629215d638b67544973.png" alt="采访照片">
          </div>
          <div class="desc">采访照片</div>
        </div>
        <div>
          <div class="img" style="width: 670px; height: 504px">
            <img src="https://img.cctvch.cn/uploads/202205/2820/629215c3b0eaf270776.png" alt="浙江革命烈士纪念馆裘古怀烈士的遗言镌刻在墙上">
          </div>
          <div class="desc">浙江革命烈士纪念馆裘古怀烈士的遗言镌刻在墙上</div>
        </div>
      </div>
      <div class="content">
        <div class="tit">多重语态创新内容 融合传播强势破圈</div>
        <p>习近平总书记强调：“要讲好党的故事、革命的故事、根据地的故事、英雄和烈士的故事，加强革命传统教育、爱国主义教育、青少年思想道德教育，把红色基因传承好，确保红色江山永不变色。”</p>
        <p>
          在艺术表现形式上，《追寻》不仅注重家书的诵读以及故事的讲述，还充分运用音乐、诗歌、戏曲、曲艺、微广播剧、影视剧片段、新闻采访等多种手法，丰富节目的表现力和感染力，让大众获得“沉浸式”情景交融的情感体验，让红色文化听得进、记得住、传得开。在讲述红军师长贺锦斋的故事时，节目中多次穿插使用了湖南桑植民歌《马桑树儿搭灯台》，这不仅仅是因为这首歌的歌词是贺锦斋改编的，还因为这首歌是他和妻子戴桂香爱情的见证。音乐的巧妙运用，让故事更动听，让情感更浓郁，让精神得以升华。
        </p>
      </div>
      <div class="img-wrap">
        <div>
          <div class="img" style="width: 788px; height: 400px">
            <img src="https://img.cctvch.cn/uploads/202205/2820/629215ac4d10f430807.png" alt="《马桑树儿搭灯台》乐谱">
          </div>
          <div class="desc">《马桑树儿搭灯台》乐谱</div>
        </div>
      </div>
      <div class="content">
        <p>
          在媒体深度融合的大背景下，《追寻》力求借助融媒体形式讲好党史故事，努力创新红色文化传播方式，真正让红色文化滋润人们心灵。《追寻》不单以“讲”的方式传递给大众，而是充分发挥视听语言的功能，让受众以“听见”“看到”“感受到”的方式去体悟家书精髓。“艺术家+播音员主持人+流量明星”的诵读嘉宾设置也照顾到各个圈层的受众，形成一个大的传播闭环，让主题教育节目能够辐射到更大的受众群。
        </p>
        <p>
          《追寻》以100集音频节目、10集纪录短片、48张海报（其中26个短视频海报）等可听可视化呈现、互动化表达、个性化传播，以大众喜闻乐见的手法提升红色文化传播效果。海报的先导作用尤为关键，大面积的红色渲染突出主题，第一时间将受众的目光吸引，动态海报与“追寻”二字相契合，令人不自觉进入海报所营造的情境中，使得小海报成功撬动大传播，在新媒体中形成一条鲜明传播链和价值链。
        </p>
        <p>
          在传播手段上，节目依托央视文艺客户端、云听客户端新媒体矩阵，联合央视新闻、央视频、央视网、央广网、学习强国等各大平台一键触发，发挥媒体融合传播的优势，扩大传播力和影响力。节目在新浪微博、快手等平台上也取得了良好效果。截至6月24日9时，微博双话题阅读量超5.5亿，全网音视频播放量超3500万。据了解，全国各地不少学校、基层党组织受节目影响，开展“聆听红色家书背后的故事传承红色基因”主题活动，通过一封封家书、一个个故事、一次次诵读，来追寻与传承共产党人百年如一的初心与使命。
        </p>
      </div>
      <div class="img-wrap">
        <div class="mr-2">
          <div class="img" style="width: 456px; height:304px">
            <img src="https://img.cctvch.cn/uploads/202205/2820/6292157894db4188212.png"
              alt="“红色家书百家校园行”活动走进北京市大兴区第一中学">
          </div>
          <div class="desc">“红色家书百家校园行”活动走进北京市大兴区第一中学</div>
        </div>
        <div>
          <div class="img" style="width: 970px; height: 304px">
            <img src="https://img.cctvch.cn/uploads/202205/2820/62921532eed7f755311.png" alt="学生们写给革命先烈的信">
          </div>
          <div class="desc">学生们写给革命先烈的信</div>
        </div>
      </div>
      <div class="content">
        <p>
          在“一切皆可‘短短短’”的发展生态中，短视频以瞬间收看、短暂停留的特点圆满地填补了用户的碎片时间，并能较高效地满足人们休闲娱乐或获取知识的需求。短音频同样如此，在内容建构上可集文字和声画的所有符号表达优势于一体，虽然时长较短，但有生动性的特点，相比于长音频也更具瞬间吸引力。在以“短”为主要欣赏诉求的时代，《追寻》以10分钟左右的音频内容瞬间抓住受众的心理，大大提升了接受度。
        </p>
        <p>
          《追寻》实际上是一次在大众文化层面上、大众文化媒介上的情感交流，这不仅是一个节目，更是一个“场”，在这里，人们交流最动人的故事、最珍贵的情感。《追寻》以家书为形，以情感为骨，以革命精神为魂，通过故事性、情感性、启示性的立体呈现，再现家书背后的真实故事与真挚情感，展现信仰的力量、党性的坚贞、人性的光辉，将红色文化以受众喜闻乐见的方式传播出去。
        </p>
        <p>《追寻》的探索让我们看到，音频节目可以支撑的文化空间、价值空间和精神空间巨大，通过深耕创新，音频节目能够开辟一片新的蓝天。</p>
      </div>
    </div>
    <div class="info-list">
      <div class="flex flex-wrap">
        <div class="list-item" v-for="(item) in state.news" :key="item.id">
          <NewsItem4 :item="item"></NewsItem4>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.topbg {
  min-width: 1440px;
  height: 0;
  padding-bottom: 27.6%;
  background: url('https://img.cctvch.cn/uploads/15d53ebd685cbe468ec9a9203acd4fc5.png');
  background-size: 100% 100%;
  margin-bottom: 55px;
}

.redletter {
  .content {
    font-size: 16px;
    line-height: 26px;

    .tit {
      margin-bottom: 10px;
      font-size: 18px;
      color: #000;
      font-weight: bold;
    }

    p:not(:last-child) {
      margin-bottom: 22px;
    }

    span {
      color: #B40606;
      font-weight: bold;
    }
  }
}

.wrapper-1 {
  height: 430px;
  margin-bottom: 70px;
  display: flex;

  .left {
    width: 375px;
    height: 430px;
    padding-top: 80px;
    margin-right: 30px;

    .title {
      background: linear-gradient(to right, #221A8A 0%, #FF000A 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .right {
    width: 1035px;
    height: 430px;
  }
}

.wrapper-2 {
  margin-bottom: 40px;
  display: flex;

  >div {
    height: 470px;
    flex-shrink: 0;
  }

  .one {
    width: 100px;
    margin-right: 10px;

    img {
      width: 97px;
      height: 88px;
    }
  }

  .two {
    width: 370px;
    margin-right: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .logo {
      height: 50px;
      margin-bottom: 5px;

      img {
        width: 108px;
        height: 47px;
      }
    }

    .title {
      margin-bottom: 35px;
      font-size: 18px;
      line-height: 30px;
      background: linear-gradient(to right, #221a8a 0%, #ff000a 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
    }

    .img {
      width: 370px;
      height: 235px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .three {
    position: relative;
    width: 550px;

    .content {
      display: none;
    }

    .img-1 {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 453px;
      height: 470px;
    }

    .img-2 {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 259px;
      height: 308px;
    }

    >div {
      position: absolute;
      line-height: 26px;
      text-align: center;
    }

    .text-1 {
      right: 100px;
      top: 80px;
      width: 80px;
    }

    .text-2 {
      right: 10px;
      top: 170px;
      width: 80px;
      text-align: left;
    }

    .num-1,
    .num-2 {
      width: 74px;
      height: 74px;
    }

    .num-1 {
      top: 0;
      right: 100px;
    }

    .num-2 {
      top: 160px;
      right: 97px;
    }

    .num {
      padding-top: 20px;
      font-size: 30px;
      font-weight: bold;
      font-family: Arial;
    }
  }

  .four {
    width: 215px;
    padding-bottom: 40px;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    img {
      width: 155px;
      height: 67px;
    }
  }
}

.wrapper-3 {
  margin-bottom: 90px;
  display: flex;

  .item {
    width: 660px;

    .left {
      line-height: 24px;
    }

    .box-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #000;
    }

    .info {
      margin-bottom: 10px;
      align-items: baseline;
    }

    .num {
      margin-right: 10px;
      font-size: 50px;
      font-weight: bold;
      line-height: 40px;
    }
  }
}

.wrapper-4 {
  margin-bottom: 80px;
  display: flex;

  .left {
    width: 890px;
    height: 510px;
    margin-right: 50px;
    border: 4px solid #000000;
    box-shadow: 0px 22px 56px 14px rgba(96, 102, 118, 0.35);
    border-radius: 12px;
    flex-shrink: 0;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .right {
    .title {
      margin-bottom: 45px;
      font-size: 24px;
      font-weight: bold;
      line-height: 38px;
      letter-spacing: 4px;
      background: linear-gradient(to right, #221A8A 0%, #FF000A 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
    }
  }
}

.wrapper-5 {
  margin-bottom: 80px;
}

.wrapper-6 {
  margin-bottom: 60px;

  .content {
    &:not(:last-child) {
      margin-bottom: 20px;
    }
  }

  .img-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    text-align: center;

    .img {
      margin-bottom: 10px;
    }

    .desc {
      font-size: 14px;
      color: #606676;
      line-height: 26px;
    }
  }

}

.info-list {
  margin-bottom: 100px;
}

.list-item {
  width: 710px;
  flex: 1;

  &:nth-child(odd) {
    margin-right: 20px;
  }
}

.scroll-wrapper {
  width: 1440px;
  height: 453px;
  overflow: hidden;
}

.scroll-item {
  float: left;
  width: 255px;
  height: 453px;
  margin-right: 33px;
  cursor: pointer;

  .img-wrap {
    width: 255px;
    height: 453px;

    img {
      width: 255px;
      height: 453px;
      margin: 0;
      transition: all 0.36s ease;
      border-radius: 12px;
    }
  }

  .info {
    transition: all 0.36s ease;
  }

  &:hover {
    .img-wrap {
      img {
        width: 200px;
        height: 355px;
        margin-top: 20px;
        margin-left: 27px;
        margin-right: 27px;
      }
    }

    .info {
      transform: translateY(-75px);
    }
  }
}

.arrow-wrap {
  .arrow {
    position: relative;
    width: 50px;
    height: 50px;
    font-size: 0;
    background: #FFFFFF;
    border: 1px solid #9195A3;
    border-radius: 12px;
    cursor: pointer;

    .infont-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 0px;
      transform: translate(-50%, -50%);

      &::before {
        content: "";
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        height: 0;
        width: 0;
        transition: all 0.2s cubic-bezier(.785, .135, .15, .86);
      }

      &::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 0px;
        height: 2px;
        background: #9195A3;
        display: inline-block;
        transform: translateY(-50%);
        transition: all 0.2s cubic-bezier(.785, .135, .15, .86);
      }
    }

    &.left {
      .infont-icon {
        &::before {
          margin-left: -4px;
          border-right: 6px solid #9195A3;
        }

        &::after {
          right: -10px;
        }
      }
    }

    &.right {
      .infont-icon {
        &::before {
          border-left: 6px solid #9195A3;
        }

        &::after {
          left: -5px;
        }
      }
    }

    &:hover {
      .infont-icon {
        &::after {
          width: 14px;
        }
      }
    }

    &.left:hover {
      .infont-icon {
        &::before {
          margin-left: -8px;
        }
      }
    }

    &.right:hover {
      .infont-icon {
        &::before {
          margin-left: 8px;
        }
      }
    }
  }
}
</style>
